<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<style>
body {
    background:  #00122B;
    color: #FFFFFF;
    font-family: Arial,sans-serif;
    font-size: 0.8em;
}
table th span.up {
    background: url("/img/icon.png") no-repeat scroll 5px -280px transparent;
}

table th span {
    display: inline-block;
    height: 9px;
    width: 22px;
}
table th span.down {
    background: url("/img/icon.png") no-repeat scroll 5px -250px transparent;
}
table td {
    background: none repeat scroll 0 0 #042F4D;
    padding: 8px 10px 7px;
}
</style>
</head>

<body>
     
      <div id="thisSort">  
        <table>
        	<tr>
            	<th>№<span class="up"></span></th>
                <th>Прiзвище та Ім’я<span></span></th>
                <th>місто<span></span></th>
                <th>Назва призу<span></span></th>
                <th>статус призу<span></span></th>
            </tr>
            <tr>
            	<td>1</td>
                <td>Федоров Петро</td>
                <td>Москва</td>
                <td>Автомобіль</td>
                <td>Виданий</td>
            </tr>
            <tr>
            	<td>2</td>
                <td>Петров</td>
                <td>Владимир</td>
                <td>Грузовик</td>
                <td>Виданий</td>
            </tr>
            <tr>
            	<td>3</td>
                <td>Сидоров</td>
                <td>Караганда</td>
                <td>Велосипед</td>
                <td>Виданий</td>
            </tr>
            <tr>
            	<td>4</td>
                <td>Андрей</td>
                <td>Витебск</td>
                <td>Автомобіль</td>
                <td>неВиданий</td>
            </tr>
            <tr>
            	<td>5</td>
                <td>Борис</td>
                <td>Ростов</td>
                <td>Автомобіль</td>
                <td>Виданий</td>
            </tr>
            <tr>
            	<td>6</td>
                <td>Станислав</td>
                <td>Анапа</td>
                <td>Автомобіль</td>
                <td>неВиданий</td>
            </tr>
            <tr>
            	<td>7</td>
                <td>Владислав</td>
                <td>Святогорск</td>
                <td>Автобус</td>
                <td>Виданий</td>
            </tr>
            <tr>
            	<td>8</td>
                <td>Катерина</td>
                <td>Саратов</td>
                <td>Автомобіль</td>
                <td>Виданий</td>
            </tr>
              <tr>
            	<td>9</td>
                <td>Аглая</td>
                <td>Дніпропетровськ</td>
                <td>Самокат</td>
                <td>неВиданий</td>
            </tr>
            <tr>
            	<td>10</td>
                <td>Федоров Петро</td>
                <td>Москва</td>
                <td>Автомобіль</td>
                <td>Виданий</td>
            </tr>
            <tr>
            	<td>11</td>
                <td>Петров</td>
                <td>Владимир</td>
                <td>Грузовик</td>
                <td>Виданий</td>
            </tr>
            <tr>
            	<td>12</td>
                <td>Сидоров</td>
                <td>Караганда</td>
                <td>Велосипед</td>
                <td>Виданий</td>
            </tr>
            <tr>
            	<td>13</td>
                <td>Андрей</td>
                <td>Витебск</td>
                <td>Автомобіль</td>
                <td>неВиданий</td>
            </tr>
            <tr>
            	<td>14</td>
                <td>Борис</td>
                <td>Ростов</td>
                <td>Автомобіль</td>
                <td>Виданий</td>
            </tr>
            <tr>
            	<td>15</td>
                <td>Станислав</td>
                <td>Анапа</td>
                <td>Автомобіль</td>
                <td>неВиданий</td>
            </tr>
            <tr>
            	<td>16</td>
                <td>Владислав</td>
                <td>Святогорск</td>
                <td>Автобус</td>
                <td>Виданий</td>
            </tr>
            <tr>
            	<td>17</td>
                <td>Катерина</td>
                <td>Саратов</td>
                <td>Автомобіль</td>
                <td>Виданий</td>
            </tr>
              <tr>
            	<td>18</td>
                <td>Аглая</td>
                <td>Дніпропетровськ</td>
                <td>Самокат</td>
                <td>неВиданий</td>
            </tr>
        </table>
        <nav class="page"><a href="" class="prev">&laquo; попередній</a> Стор. <span class="currentPage">1</span> з <span class="coutPage"></span>   <a href="" class="next">наступна »</a></nav>
     </div>
        
     <script type="text/javascript">
	 

$(function(){
	
	$("table tr:even td").css({
		'background': 'none'
	})
	
})

     	if (Function.prototype.bind == null) {

    Function.prototype.bind = (function (slice){

        // (C) WebReflection - Mit Style License
        function bind(context) {

            var self = this; // "trapped" function reference

            // only if there is more than an argument
            // we are interested into more complex operations
            // this will speed up common bind creation
            // avoiding useless slices over arguments
            if (1 < arguments.length) {
                // extra arguments to send by default
                var $arguments = slice.call(arguments, 1);
                return function () {
                    return self.apply(
                        context,
                        // thanks @kangax for this suggestion
                        arguments.length ?
                            // concat arguments with those received
                            $arguments.concat(slice.call(arguments)) :
                            // send just arguments, no concat, no slice
                            $arguments
                    );
                };
            }
            // optimized callback
            return function () {
                // speed up when function is called without arguments
                return arguments.length ? self.apply(context, arguments) : self.call(context);
            };
        }

        // the named function
        return bind;

    }(Array.prototype.slice));
}






		function Cell($cell){
			this.$cell = $cell;
			this.cellText = this.$cell.text()
		}
		
		
		function SortTable (id){
			var myself = this;
			
			this.$cotain = $(id);
			
			this.$table = this.$cotain.find("table");
			this.$tr = this.$table.find("tr");
			
			this.$nav = this.$cotain.find("nav");
			this.$currentPage = this.$nav.find(".currentPage");
			this.$coutPage = this.$nav.find(".coutPage");
			this.$prev = this.$nav.find(".prev");
			this.$next = this.$nav.find(".next");
			
			this.$prev.bind("click", this.turnOver.bind(this,myself))
			this.$next.bind("click", this.turnOver.bind(this,myself))
			
			this.countTrPage = 10;
			this.countPage = Math.ceil(this.$tr.length / this.countTrPage);
			this.currentPage = 1;
			
			this.directionSort = [];
			this.directionSortOldIndex = "";
			
			this.cell = [];
			
				this.$tr.each(function(){
					myself.cell[$(this).index()] = [];
				})
				myself.cell.shift();

			
			var i = 0;
			this.$tr.not(":first").each(function(){
				
				var trThis = $(this);
				
				$(this).find("td").each(function(){
					myself.cell[i].push(new Cell($(this)));
				})
				i++;
			})
			
			
			this.$table.find("th").find("span").each(function(){
				$(this).parent().bind("click", myself.sortCol.bind(myself, this));	
				
				myself.directionSort[$(this).parent().index()] =  0;
			
			});
		
			
			this.show();
		}
		
		
		SortTable.prototype.sortCol = function (element, event){

			var myself = this;
			
			if (this.directionSortOldIndex != $(event.currentTarget).index())	this.directionSort[this.directionSortOldIndex] = 0;
			
	
			
			this.directionSort[$(event.currentTarget).index()] = (this.directionSort[$(event.currentTarget).index()] == 1)? 2 : 1;
			
	

			this.directionSortOldIndex = $(event.currentTarget).index();

			this.cell.sort(function(a, b) {
				
					
					
					if(isNaN(Number(a[$(event.currentTarget).index()].cellText)) && isNaN(Number(b[$(event.currentTarget).index()].cellText))) {
			
						var result = (myself.directionSort[$(event.currentTarget).index()] == 2) 
							? 
								a[$(event.currentTarget).index()].cellText.toLowerCase().localeCompare(b[$(event.currentTarget).index()].cellText.toLowerCase())
							:
								(myself.directionSort[$(event.currentTarget).index()] == 1) ? b[$(event.currentTarget).index()].cellText.toLowerCase().localeCompare(a[$(event.currentTarget).index()].cellText.toLowerCase()) : false;
					
					}else{	
					
						var result = (myself.directionSort[$(event.currentTarget).index()] == 1) 
							? 
								Number(b[$(event.currentTarget).index()].cellText) - Number(a[$(event.currentTarget).index()].cellText)
							:
								(myself.directionSort[$(event.currentTarget).index()] == 2) 
								?
									Number(a[$(event.currentTarget).index()].cellText) - Number(b[$(event.currentTarget).index()].cellText)
								:
									false
							;
					
					
						
					}
					return result;
			});
			
			
			
			
			
			this.rewrite();
		}
		

		SortTable.prototype.rewrite = function(){
				var myself = this;
			
				this.$table.find("th").each(function(){
					
					var $span = $(this).find("span");
					
					$span.removeClass("up");
					$span.removeClass("down");
					
					if(myself.directionSort[$(this).index()] == 2) $span.addClass("up");
					if(myself.directionSort[$(this).index()] == 1) $span.addClass("down");
					
				});
				
				this.$tr.not(":first").remove();
				
				var str = "";
			
				$.each(this.cell, function(){
					var td = "";
					
					$.each(this, function(){
						td += "<td>" + this.cellText + "</td>";
					})
					
					str += "<tr>" + td + "</tr>";
					
				});
				
				this.$table.append(str);
				
				this.$tr = this.$table.find("tr");
				
				this.$tr.filter(":even").find("td").css({
					'background': 'none'
				});
				this.show();
		}


		SortTable.prototype.show = function(){

			this.$tr.css({"display":"none"});
			this.$tr.filter(":first").css({"display":"table-row"});
			
			var lastElementPage = this.currentPage * this.countTrPage;
			var firstElementPage = (lastElementPage - this.countTrPage);
			
			this.$tr.slice(firstElementPage, lastElementPage).css({"display":"table-row"});
			
			
			this.$currentPage.html(this.currentPage);
			this.$coutPage.html(this.countPage);
			
			this.$prev.css({"display":"none"});
			this.$next.css({"display":"none"});
			
			if(this.currentPage < this.countPage ) this.$next.css({"display":"inline"});
			if(this.currentPage > 1 ) this.$prev.css({"display":"inline"});
			
		}
		
		SortTable.prototype.turnOver = function(element, event){
			event.preventDefault();
			($(event.currentTarget).hasClass("next")) ? this.currentPage++ : this.currentPage-- ;
			
			
			this.show();
		}
		
		
		new SortTable("#thisSort")
  



     </script>   
        
</body>
</html>
